<template>
  <div class="examination">
    <div class="examinationTop">
      <div class="examinationNum">
        <p class="examinationText">年级：</p>
        <el-select
          v-model="ruleFormTop.gradeId"
          @change="changeGrade"
          placeholder="请选择年级"
        >
          <el-option
            v-for="(item, index) in gradeOptions"
            :key="index"
            :label="item.typeName"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="examinationName">
        <p>学科：</p>
        <el-select
          v-model="ruleFormTop.subjectId"
          @change="changeSubject"
          placeholder="请选择学科"
        >
          <el-option
            v-for="(item, index) in subjectOptions"
            :key="index"
            :label="item.typeName"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="examinationName">
        <p>试卷难度：</p>
        <el-select
          v-model="ruleFormTop.difficulty"
          @change="changeDifficulty"
          placeholder="请选择难度"
        >
          <el-option
            v-for="(item, index) in difficultyOptions"
            :key="index"
            :label="item.typeName"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="moreBtn">
        <el-button
          type="primary"
          @click="searchBtn"
          class="searchBtn"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="primary" @click="refreshBtn" class="refreshBtn"
          >重置</el-button
        >
      </div>
    </div>
    <div class="TeachingPlanBottom">
      <div class="add">
        <el-button type="primary" @click="addExamination" class="refreshBtn"
          >新建</el-button
        >
      </div>
      <div class="operationBtns">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
          :cell-style="{ textAlign: 'center' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column label="名称" prop="paperName"> </el-table-column>
          <el-table-column label="年级" prop="gradeId">
          </el-table-column>
          <el-table-column prop="subjectId" label="学科">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="difficultyName" label="试卷难度">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="250">
            <template slot-scope="scope">
              <div class="haed">
                <el-button
                  type="primary"
                  @click="edit(scope.row)"
                  class="refreshBtn"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  @click="remove(scope.row)"
                  class="searchBtn"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" v-show="total > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            ref="pagination"
            :total="total"
          >
          </el-pagination>
          <el-button class="sure" type="primary">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSubsectionRulesDataApi,
  removeSubsectionRulesItemApi,
  getGradeListApi,
  // getCourseListApi,
  getDifficultyApi
} from "@/api/onlinehomework/subsectionRules.js";
export default {
  name: "QuestionBank",
  data() {
    return {
      examinationNum: "", // 考试期次
      examinationName: "", // 考试名称
      total: 0, // 总条数
      tableData: [], // table数据
      currentPage: 0, //页码
      dialogFormVisible: false, // 弹框开关
      ruleFormTop:{
        gradeId:'',
        subjectId:'',
        difficulty:''
      },
      gradeOptions:[],
      subjectOptions:[],
      difficultyOptions:[]

    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";

    this.getSubsectionRulesDataList();
    // getGradeListApi({ parentId: 158 }).then((res) => {
    //   console.log(res);
    //   this.gradeOptions = res.rows
    // });
    getDifficultyApi({ parentId: 130 }).then(res=>{
      console.log(res);
      this.subjectOptions = res.rows
    })

    getDifficultyApi({ parentId: 158 }).then(res=>{
      console.log(res);
      this.difficultyOptions = res.rows
    })

    getGradeListApi({parentId:55}).then(res=>{
      console.log(res);
      this.gradeOptions = res.rows
    })
     

  },
  methods: {
    changeSubject() {},
    changeGrade() {},
    changeDifficulty() {},
    // 试卷列表
    getSubsectionRulesDataList(obj) {
      getSubsectionRulesDataApi({...obj,pageSize:'10',pageNum:this.currentPage}).then((res) => {
        console.log(res, "-----");
        if(res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total
          this.tableData.forEach(item=>{
            if(item.difficulty == '1') {
              item.difficultyText = '容易'
            } else if(item.difficulty == '2') {
              item.difficultyText = '简单'
            } else if(item.difficulty == '3') {
              item.difficultyText = '普通'
            } else if(item.difficulty == '4') {
              item.difficultyText = '较难'
            } else if(item.difficulty == '5') {
              item.difficultyText = '困难'
            }
            // this.subjectOptions.forEach(it=>{
            //   if(item.gradeId == it.)
            // })
          })
        }
      });
    },

    // table选中事件
    handleSelectionChange() {},
    // 新增考试
    addExamination() {
      this.$router.push({
        path: "/onlinehomework/testpaper/automatic",
        name: "automatic",
        params: {
          row: "0",
          isEdit: "0",
        },
      });
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    sureBtn() {
      this.dialogFormVisible = false;
    },
    // 预览
    preview(row) {
      console.log(row);
    },
    // 修改
    edit(row) {
      console.log(row);
      this.$router.push({
        path: "/onlinehomework/testpaper/automatic",
        name: "automatic",
        params: {
          row: row.id,
          isEdit: "1",
          currentPage:this.currentPage
        },
      });
    },
    // 删除
    remove(row) {
        this.$confirm("确认删除记录吗?", "提示", {
          type: "warning",
        }).then(() => {
          removeSubsectionRulesItemApi({ id: row.id }).then((res) => {
          console.log(res);
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getSubsectionRulesDataList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });

        });
    },
    // 获取列表数据
    async getQuertionBankList() {},
    removeHtmlStyle(html) {
      let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
      let relTag = /<.+?>/g; //去除标签
      let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g; // 清除类名
      let newHtml = "";
      if (html) {
        newHtml = html.replace(relStyle, "");
        newHtml = newHtml.replace(relTag, "");
        newHtml = newHtml.replace(relClass, "");
      }
      return newHtml;
    },
    // 搜索
    searchBtn() {
      // if(this.ruleFormTop.gradeId && !this.ruleFormTop.subjectId || this.ruleFormTop.difficulty) {
        let obj = {
          gradeId:this.ruleFormTop.gradeId,
          subjectId:this.ruleFormTop.subjectId,
          difficulty:this.ruleFormTop.difficulty
        }
        // console.log(obj);
        // let obj = {
        //     subjectId: this.subjectId,
        //     gradeId: this.gradeId,
        //     id: this.studentName,
        //   };
          let obj1 = {};
          for (let key in obj) {
            if (
              (obj[key] === 0 || obj[key]) &&
              obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
            ) {
              // 保存属性
              obj1[key] = obj[key];
            }
          }
       getSubsectionRulesDataApi({...obj1,pageSize:'10',pageNum:this.currentPage}).then(res=>{
          console.log(res);
          this.tableData = res.rows
        })
      // }
      
    },

    // 重置
    refreshBtn() {
      this.ruleFormTop = {
        gradeId:'',
        subjectId:'',
        difficulty:''
      }
      this.getSubsectionRulesDataList()
    },

    // table选中事件
    selectionChange() {},

    // 分页事件
    handleSizeChange() {},
    handleCurrentChange() {
      this.getSubsectionRulesDataList()
    },
    // 创建题目
    addCollege() {},
  },
};
</script>

<style lang="scss" scoped>
.examination {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  .examinationTop {
    min-width: 100vh;
    width: 100%;
    // height: 80px;
    display: flex;
    font-size: 14px;
    // justify-content: space-between;
    align-items: center;
    background: #fff;
    flex-wrap: wrap;
    border-radius: 10px 10px 0 0;
    padding: 0 20px;
    // box-shadow: 0px 4px 3px #ccc;

    .examinationNum,
    .examinationName {
      display: flex;
      flex-wrap: nowrap;
      text-align: center;
      align-items: center;
      margin: 20px 0;
      width: 220px;
      p {
        text-align: right;
        width: 112px;
      }
      .el-input {
        width: 170px;
      }
    }
    .moreBtn {
      width: 200px;
      margin: 20px;
      display: flex;
      .searchBtn {
        color: white;
        border: none;
        background-color: rgb(123, 180, 208);
      }
      .refreshBtn {
        color: white;
        border: none;
        background-color: rgb(108, 207, 204);
      }
      .newAdd {
        border: none;
        background-color: rgb(86, 164, 212);
      }
    }
  }
  .TeachingPlanBottom {
    width: 100%;
    flex: 1;
    background-color: white;
    padding: 0 20px;
    // margin-top: 10px;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    min-width: 100vh;
    // .infoTeachingPlanBottom {
    height: 100%;

    .add {
      float: right;
      margin-bottom: 10px;
    }
    .operationBtns {
      width: 100%;
      // height: 60px;
      // display: flex;
      // align-items: center;
      margin-top: 10px;
      // flex-direction: column;
      overflow-y: auto;
      // justify-content: space-between;
      // .setBtnsLeftTitle {
      //     width: 200px;
      //     font-size: 16px;
      //     font-weight: 600;
      //     color: rgb(57, 141, 220);
      //     p {
      //         width: 100px;
      //     }
      // }
      .moreBtn {
        display: flex;
      }
      .haed {
        align-items: center;
        background: #fff;
        flex-wrap: wrap;
        border-radius: 10px 10px 0 0;
        padding: 0 20px;
        // box-shadow: 0px 4px 3px #ccc;

        .examinationNum,
        .examinationName
        {
            display: flex;
            flex-wrap: nowrap;
            text-align: center;
            align-items: center;
            margin: 20px 0;
            width: 220px;
            p {
                text-align: right;
                width: 112px;
            }
            .el-input{
                width: 170px;
            }
        }
        .moreBtn {
            width: 200px;
            margin: 20px;
            display: flex;
            .searchBtn {
                color: white;
                border: none;
                background-color: rgb(123, 180, 208);
            }
            .refreshBtn {
                color: white;
                border: none;
                background-color: rgb(108, 207, 204);
            }
            .newAdd {
                border: none;
                background-color: rgb(86, 164, 212);
            }
        }
    }
    .TeachingPlanBottom {
        width: 100%;
        flex: 1;
        background-color: white;
        padding: 0 20px;
        // margin-top: 10px;
        border-radius: 0 0 10px 10px;
        box-sizing: border-box;
        min-width: 100vh;
        // .infoTeachingPlanBottom {
        height: 100%;

        .add {
            float: right;
            margin-bottom: 10px;
        }
        .operationBtns {
            width: 100%;
            // height: 60px;
            // display: flex;
            // align-items: center;
            margin-top: 10px;
            // flex-direction: column;
            overflow-y: auto;
            // justify-content: space-between;
            // .setBtnsLeftTitle {
            //     width: 200px;
            //     font-size: 16px;
            //     font-weight: 600;
            //     color: rgb(57, 141, 220);
            //     p {
            //         width: 100px;
            //     }
            // }
            .moreBtn{
                display: flex;
            }
            .haed {
                height: 30px;
                align-items: center;
                color: rgb(135, 173, 218);
                display: flex;
                justify-content: center;
                .edit{
                    cursor:pointer;
                    font-weight: bold;
                }
                .del{
                    cursor:pointer;
                    margin-left: 10px;
                    font-weight: bold;
                }
            }

            ::v-deep .el-table thead tr {
                background-color: #f2f8fb !important;
            }
            ::v-deep .el-table tr:nth-child(2n) {
                background-color: #f9f9f9;
            }
            ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #86caf0;
                border-color: #86caf0;
            }

            ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #86caf0;
                border-color: #86caf0;
            }
            .el-icon-delete {
                color: red;
                font-weight: bold;
                margin-left: 15px;
                font-size: 18px;
            }
            .el-icon-edit-outline {
                font-size: 18px;
                font-weight: bold;
                color: rgb(142, 198, 216);
            }
            .share {
                margin-left: 15px;
            }
            ::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
                background: red !important;
            }
        }
        // .tableData {
        //     width: 100%;
        //     overflow-y: auto;

        // }
    }
    ::v-deep .el-dialog{
        width: 600px;
        height: 550px;
        border-radius: 10px 10px 0 0;
        .el-dialog__header {
            border-radius: 10px 10px 0 0;
            text-align: center;
            background-color: rgb(72, 149, 219);
            .el-dialog__title {
                color: #fff;
            }
            .el-dialog__headerbtn .el-dialog__close {
                color: #fff;
            }
        }
        .dialog-footer {
            text-align: center;
            button {
                width: 100px;
                height: 35px;
                border-radius: 16px;
                line-height: 0;
            }
            .cancel {
                border: none;
                color: #848383;
                background-color: #f0f0f0;
            }
            .determine {
                border: none;
                background-color: #4995dc;
            }
        }
        .infoDialog{
            // width: 700px;
            // height: 500px;
            .grade{
                width: 100%;
                height: 40px;
                .gradeBox{
                    display: flex;
                    p:first-child{
                        width: 80px;
                    }
                }
                .subject{
                    display: flex;
                    margin-top: 10px;
                    p:first-child{
                        width: 80px;
                    }
                }
            }
            .testQuestions,
            .stem,
            .bidAnswers,
            .analysis,
            .fraction,
            .difficulty,
            .Knowledge
            {
                display: flex;
                width: 100%;
                height: 40px;
                align-items: center;
                p:first-child{
                    width: 80px;
                    // text-align: right;
                }
            }
        }
    }
    // .block {
    //     padding: 0 20px 0 0;
    //     height: 65px;
    //     display: flex;
    //     justify-content: center;
    //     .setPlan {
    //       margin-left: 10px;
    //     }
    //   }

      ::v-deep .el-table thead tr {
        background-color: #f2f8fb !important;
      }
      ::v-deep .el-table tr:nth-child(2n) {
        background-color: #f9f9f9;
      }
      .edit {
        width: 15px;
        height: 15px;
        margin-left: 10px;
      }
      .del {
        width: 15px;
        height: 15px;
        margin-left: 10px;
      }
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #86caf0;
        border-color: #86caf0;
      }

      ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #86caf0;
        border-color: #86caf0;
      }
      .el-icon-delete {
        color: red;
        font-weight: bold;
        margin-left: 15px;
        font-size: 18px;
      }
      .el-icon-edit-outline {
        font-size: 18px;
        font-weight: bold;
        color: rgb(142, 198, 216);
      }
      .share {
        margin-left: 15px;
      }
      ::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
        background: red !important;
      }
    }
    // .tableData {
    //     width: 100%;
    //     overflow-y: auto;

    // }
  }
  ::v-deep .el-dialog {
    width: 600px;
    height: 550px;
    border-radius: 10px 10px 0 0;
    .el-dialog__header {
      border-radius: 10px 10px 0 0;
      text-align: center;
      background-color: rgb(72, 149, 219);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }
    .dialog-footer {
      text-align: center;
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      .cancel {
        border: none;
        color: #848383;
        background-color: #f0f0f0;
      }
      .determine {
        border: none;
        background-color: #4995dc;
      }
    }
    .infoDialog {
      // width: 700px;
      // height: 500px;
      .grade {
        width: 100%;
        height: 40px;
        .gradeBox {
          display: flex;
          p:first-child {
            width: 80px;
          }
        }
        .subject {
          display: flex;
          margin-top: 10px;
          p:first-child {
            width: 80px;
          }
        }
      }
      .testQuestions,
      .stem,
      .bidAnswers,
      .analysis,
      .fraction,
      .difficulty,
      .Knowledge {
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        p:first-child {
          width: 80px;
          // text-align: right;
        }
      }
    }
  }
  .block {
    padding: 0 20px 0 0;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: #fff;

    ::v-deep .btn-prev {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }

    ::v-deep .btn-next {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-pager li {
      background: #fff;
      font-size: 13px;
      min-width: 30.5px;
      height: 28px;
      line-height: 28px;
      box-sizing: border-box;
    }

    ::v-deep .el-pager li.active {
      background-color: #4895db;
      color: #fff;
      cursor: default;
    }
    ::v-deep .number {
      border: solid 1px #e6e6e6;
      margin: 0 5px;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-button {
      height: 28px;
      line-height: 0;
    }
    .sure {
      width: 50px;
      height: 30px;
      line-height: 0;
      text-align: center;
      padding: 0;
    }
  }
}
</style>
